<template>
  <div class="rlc">
    <!--    地图 B-->
    <Bmap ref='baseMap' v-on:dzjd="openJd"></Bmap>
    <!--    地图 E-->
    <div class="pop_up">
      <!--新增tab-->
      <div class="newtab">
        <span>实时相机</span>
        <span @click="golc">普通相机</span>
      </div>
      <!--新增tab-->
      <!--      搜索 B-->
      <div style="padding: 0.2rem .2rem 0 .2rem;">
        <!--<el-input placeholder="搜索相机卡编号" v-model="cameranumber" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click="sec"></el-button>
        </el-input>-->
        <el-select v-model="cameranumber" clearable filterable style="width: 100%;"
                   @change="sec"
                   placeholder="相机编号">
          <el-option
            v-for="item in cardNumArr"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </div>
      <!--      搜索 E-->
      <!--列表-->
      <div class="listrl" v-for="rls in rlclist">
        <!--图片-->
        <div @click="setlocal(rls)" style="cursor: pointer">
          <div class="newimg" v-if="rls.nowStatus.cameraStatus!='离线'&&rls.surfacePlotUrl!=null">
            <img :src="rls.surfacePlotUrl" v-if="isMp4(rls.surfacePlotUrl)=='照片'" alt="">
            <img src="../../static/images/shipin.jpg" v-if="isMp4(rls.surfacePlotUrl)=='视频'" alt="">
          </div>
          <div class="newimg" v-if="rls.nowStatus.cameraStatus!='离线'&&rls.surfacePlotUrl==null">
            <img src="../../static/images/np.jpg" alt="">
          </div>
          <div class="newimg" v-if="rls.nowStatus.cameraStatus=='离线'">
            <img src="../../static/images/nonexh.png" alt="">
          </div>

          <div class="tt">
            <span>{{ rls.surfacePlotData }}</span>
          </div>
        </div>
        <!--图片-->
        <!--文字-->
        <div>
          <div>
            <span>拍摄物种：{{ rls.speciesNum }}种</span>
          </div>
          <div>
            <span>相机编号：{{ rls.imei }}</span>
          </div>
          <div>
            <span v-if="rls.nowStatus.cameraStatus!='损坏'">
              当前状态：{{ rls.nowStatus.cameraStatus }}
            </span>

            <span v-else>
             当前状态： <span @click="opensh(rls.nowStatus.damageInfo)"
                         style="color: red;text-decoration: underline;cursor: pointer">损坏</span> </span>
          </div>
          <div>
            <span>
              网格编号：{{ rls.oneKmGridNum }}
            </span>

          </div>
        </div>
        <!--文字-->
        <!--文字2-->
        <div>
          <div>
            <span>今日视频/照片</span>
            <span>{{ rls.todayMediaNum }}张</span>
          </div>
          <div>
            <span>今日发现:</span>
            <span>{{ rls.discernName==''?'暂无': rls.discernName}}</span>
          </div>
          <div>
             <span
               @click="openisivdetails(rls)"
               style="font-size:.16rem;color: #00CC46;text-decoration: underline;cursor: pointer">查看详情</span>
            <span
              @click="setlocal(rls)"
              style="font-size:.16rem;color: #00CC46;text-decoration: underline;cursor: pointer">定位</span>
          </div>
        </div>
        <!--文字2-->
      </div>
      <!--列表-->
      <div class="rlcpge">
        <el-pagination
          @current-change="handleCurrentChange"
          :page-size="5"
          :current-page.sync="currentPage"
          layout="prev, pager, next"
          :total="totalElements">
        </el-pagination>
      </div>
    </div>
    <!--损坏-->
    <div class="breakdown" v-if="issh">
      <div>
        <div @click="closesh">
          <img src="../../static/images/icon/close.png" alt="">
        </div>
        <div @click="looksh(damageInfo.urlStr)" title="点击查看图片详情">
          <img :src="Filterphotos(damageInfo.urlStr)" alt="">
          <div>
            <span>{{ Filterphotoslength(damageInfo.urlStr) }}张</span>
          </div>
        </div>
        <div class="btxt">
          <span>损坏描述：</span>
          <span>{{ damageInfo.damageDescribe }}</span>
        </div>
        <div class="btxt">
          <span>损坏程度：</span>
          <span>{{ damageInfo.damageCondition }}</span>
        </div>
        <div class="btxt">
          <span>损坏原因：</span>
          <span>{{ damageInfo.damageCause }}</span>
        </div>
        <div class="btxt">
          <span>备注：</span>
          <span>{{ damageInfo.remark == null ? '暂无' : damageInfo.remark }}</span>
        </div>
      </div>
    </div>
    <!--损坏-->
    <!--slideshow-->
    <slideshow ref="sli"></slideshow>
    <!--slideshow-->
  </div>
</template>
<script>
  import http from '../utils/http'
  import api from '../utils/api'
  import clb from './calendar.vue'
  import Bmap from './Map'

  export default {
    components: {
      'CLB': clb,
      'Bmap': Bmap
    },
    data() {
      return {
        uploadBox: false,
        cameranumber: "",
        issh: false,
        form: [],
        dialogVisible: false,
        pageNum: 1,
        totalElements: 10,
        rlclist: [],
        damageInfo: {},
        currentPage: 1,
        //详情 B
        rcobj: {},
        activeName: "second",
        sjpList: [],
        sjpnum: 1,
        detailsok: true,
        carousel: [],
        speciesdatails: {},
        species: [],
        no_phot: "../../static/images/np.jpg",
        now_pn: 0,
        all_pn: 0,
        state: 0,
        animalName: "",
        //详情 E
        cardNumArr: [],
        value1: "",
        isivdetails: false,
        abilityList: '',
        arrdata: [],
        sampleId: "",
        setTimepoint: null,
        updatalist: {},
        datafiles: [],
        filelists: [],
        upd: {
          action: api.infrared.updateImg,
          data: {
            id: "",
          }
        },

      }
    },
    created() {
      this.areaId = sessionStorage.getItem('areaId');
      this.abilityList = sessionStorage.getItem('abilityList')
      if (this.$route.query.pageNum != undefined) {
        this.pageNum = this.$route.query.pageNum;
        this.currentPage = Number(this.$route.query.pageNum);
      }
      this.getImei();
    },
    mounted() {
      let vm = this;
      setTimeout(function () {
        vm.$refs.baseMap.creationMap();
        setTimeout(function () {
          vm.getallDevices();
          if (sessionStorage.getItem('HDD') != undefined) {
            vm.cGetrealTimeCamera();
            vm.setlocal(JSON.parse(sessionStorage.getItem('HDD')))
          } else {
            vm.getrealTimeCamera();
          }
        }, 1000)
      }, 500)
    },
    beforeRouteLeave(to, from, next) {
      if (to.path != '/rlc/realtimecameraDetail') {
        if (sessionStorage.getItem('HDD') != undefined) {
          sessionStorage.removeItem('HDD');
        }
      }
      next()
    },
    methods: {
      openJd(data) {
        console.log(data);
        this.$router.push({
          path: '/rlc/jianDing',
          query: {pageNum: this.pageNum, id: data.imageId}
        })
      },
      getImei() {
        var vm = this;
        (async function () {
          let res = await http.get(api.infrared.authenticate, {
            areaId: vm.areaId,
            type: "红外相机"
          })
          if (res.data.code == '200') {
            vm.cardNumArr = res.data.data;
          }
        })()
      },
      getallDevices() {
        var vm = this;
        (async function () {
          let res = await http.get(api.infrared.allDevices + "?areaId=" + vm.areaId)
          if (res.data.code == '200') {
            if (res.data.data.length > 0) {
              var arr = [];

              function imglist(data) {
                let url = "";
                if (data.nowStatus.cameraStatus != '离线' && data.surfacePlotUrl != null) {
                  url = data.surfacePlotUrl;
                }
                if (data.nowStatus.cameraStatus != '离线' && data.surfacePlotUrl == null) {
                  url = "../../static/images/np.jpg";
                }
                if (data.nowStatus.cameraStatus == '离线') {
                  url = "../../static/images/nonexh.png";
                }
                return url;
              }

              res.data.data.forEach(e => {
                var z = {
                  id: e.id,
                  name: "",
                  borderColor: "#ffffff",
                  fillColor: "#dd2c00",
                  data: {
                    obj: e,
                    mtl: [],
                    id: e.id,
                    size: 1,
                    isdetails: true,
                    isdetailsTetx: "查看详情",
                    isdetailsLink: {path: '/rlc/realtimecameraDetail', data: e, pageNum: vm.pageNum},
                    opennew: true,
                    mediaList: [imglist(e)]
                  },
                  geojson: {coordinates: [e.lon, e.lat], type: "Point"}
                };
                arr.push(z);
              })
              vm.$refs.baseMap.previewshape(arr, "alread_Point");
            }
          }
        })()
      },
      //过滤照片
      Filterphotos(url) {
        let arr;
        if (url != null) {
          arr = url.split("#")[0];
          return arr;
        } else {
          arr = "../../static/images/np.jpg";
          return arr;
        }
      },
      Filterphotoslength(leg) {
        let str = 0;
        if (leg != null) {
          str = leg.split("#").length;
          return str;
        } else {
          return str;
        }
      },
      sec() {
        this.pageNum = 1;
        this.currentPage = 1;
        this.getrealTimeCamera();
      },
      //获取数据
      getrealTimeCamera() {
        var vm = this;
        (async function () {
          let res = await http.get(api.infrared.realTimeCamera + '?areaId=' + vm.areaId + '&imei=' + vm.cameranumber + '&pageNum=' + vm.pageNum + '&pageSize=5')
          if (res.data.code == '200') {
            vm.rlclist = res.data.data.content;
            vm.totalElements = res.data.data.totalElements;
            if (res.data.data.content.length > 0) {
              setTimeout(function () {
                vm.setlocal(res.data.data.content[0])
              }, 500)
            }
          }
        })()
      },
      //获取数据
      cGetrealTimeCamera() {
        var vm = this;
        (async function () {
          let res = await http.get(api.infrared.realTimeCamera + '?areaId=' + vm.areaId + '&imei=' + vm.cameranumber + '&pageNum=' + vm.pageNum + '&pageSize=5')
          if (res.data.code == '200') {
            vm.rlclist = res.data.data.content;
            vm.totalElements = res.data.data.totalElements;
          }
        })()
      },
      setlocal(t) {
        function imglist(data) {
          let url = "";
          if (data.nowStatus.cameraStatus != '离线' && data.surfacePlotUrl != null) {
            url = data.surfacePlotUrl;
          }
          if (data.nowStatus.cameraStatus != '离线' && data.surfacePlotUrl == null) {
            url = "../../static/images/np.jpg";
          }
          if (data.nowStatus.cameraStatus == '离线') {
            url = "../../static/images/nonexh.png";
          }
          return url;
        }

        var data = {
          mtl: [],
          obj: t,
          id: "8c4e1918635a47a283de7d4ccc8dde86",
          size: 1,
          isdetails: true,
          isdetailsTetx: "查看详情",
          opennew: true,
          isdetailsLink: {path: '/rlc/realtimecameraDetail', data: t, pageNum: this.pageNum},
          mediaList: [imglist(t)]
        }, lonlat = [t.lon, t.lat];
        this.$refs.baseMap.artificialLocation(data, lonlat);
      },
      openisivdetails(data) {
        this.$router.push({
          path: '/rlc/realtimecameraDetail',
          query: {pageNum: this.pageNum}
        })
        sessionStorage.setItem('HDD', JSON.stringify(data));
      },
      handleCurrentChange(val) {
        this.pageNum = val;
        this.getrealTimeCamera();
      },
      opensh(obj) {
        this.issh = true;
        this.damageInfo = Object.assign({}, obj);
      },
      closesh() {
        this.issh = false;
      },
      golc() {
        this.$router.push('/rlc/cameraDistribution')
      },
      looksh(data) {
        if (this.Filterphotoslength(data) > 0) {
          var arr = data.split("#");
          this.$refs.sli.acceptData(arr);
        }
      },

      isMp4(m) {
        let iv = m.split('.');
        if (iv[iv.length - 1].toLowerCase() == 'mp4') {
          return '视频'
        } else {
          return '照片'
        }
      },

    }
  }
</script>
<style scoped>
  @import "../../static/css/rlc.css";
</style>

<style scoped>

  #wait .el-form--inline .el-form-item {
    width: 32%;
  }

</style>

<style>
  #wait .el-form--inline .el-form-item .el-form-item__content {
    width: 58%;
  }

  .el-tabs__content {
    display: none;
  }
</style>
